<template>
  <div>
    <div style="height:70px"></div>
    <div>
      <a-table :columns="columns" :data-source="ticketList">
        <template #cnm_hall_id="{ text }">{{ text }}号厅</template>
        <template #seat_row="{ text }">{{ text }}排</template>
        <template #seat_column="{ text }">{{ text }}座</template>
        <template #opr="{record}">
          <a-button
            type="primary"
            @click="toSelectSeat(record.cnm_hall_id, record.price, record.screen_time)"
          >选座购票</a-button>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { Modal } from "ant-design-vue";
import { ref, defineComponent, h } from "vue";
import { useRouter, useRoute } from "vue-router";

import { get, post, tip } from "@/common";

const columns = [
  {
    dataIndex: "screen_time", //服务端数据
    title: "放映时间" //表头项名称
  },
  {
    dataIndex: "mov_name", //服务端数据
    title: "电影" //表头项名称
  },
  {
    dataIndex: "cnm_name", //服务端数据
    title: "影院", //表头项名称
    //slots定义插槽，即将开发者自定义的内容嵌入
  },
  {
    dataIndex: "cnm_hall_id", //服务端数据
    title: "影厅", //表头项名称
    //slots定义插槽，即将开发者自定义的内容嵌入
    slots: {
      customRender: "cnm_hall_id" //定义插槽名称，即以cusid为名插槽的数据插入该列位置
    }
  },
  {
    dataIndex: "seat_row", //服务端数据
    title: "座位（排）", //表头项名称
    slots: {
      customRender: "seat_row" //定义插槽名称，即以cusid为名插槽的数据插入该列位置
    }
  },
  {
    dataIndex: "seat_column", //服务端数据
    title: "座位（列）", //表头项名称
    slots: {
      customRender: "seat_column" //定义插槽名称，即以cusid为名插槽的数据插入该列位置
    }
  },
  {
    dataIndex: "price", //服务端数据
    title: "票价（元）" //表头项名称
  }
];

const ticketList = ref([]);

const getOrders = () => {
  get("user/ticket/get-ticket").then(res => {
    ticketList.value = res.data;
    console.log(ticketList.value);
  });
}

getOrders();

</script>

<style scope>

</style>